{% extends "adminmain.html" %}

{% block title %}银行卡管理{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/admin_main.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='css/admin_card.css') }}">
{% endblock %}

{% block content %}
<div class="dashboard-container">
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url_for('admin.adminmain') }}">首页</a></li>
            <li class="breadcrumb-item active" aria-current="page">银行卡管理</li>
        </ol>
    </nav>

    <!-- 银行卡管理卡片 -->
    <div class="dashboard-card">
        <div class="card-header">
            <h2><i class="bi bi-credit-card me-2"></i>银行卡管理</h2>
            <div class="card-actions">
                <button class="btn btn-success" id="addCardBtn">
                    <i class="bi bi-plus-circle me-1"></i>添加银行卡
                </button>
                <button class="btn btn-primary" id="exportCsvBtn">
                    <i class="bi bi-file-earmark-arrow-down me-1"></i>导出CSV
                </button>
            </div>
        </div>

        <!-- 搜索区域 -->
        <div class="search-section mb-4">
            <div class="row g-3">
                <div class="col-md-6">
                    <input type="text" class="form-control" placeholder="输入卡号" id="cardIdSearch" value="{{ cardIdSearch }}">
                </div>
                <div class="col-md-6">
                    <input type="text" class="form-control" placeholder="输入客户编号" id="customerIdSearch" value="{{ customerIdSearch }}">
                </div>
                <div class="col-md-12">
                    <button class="btn btn-primary w-100" id="searchBtn">
                        <i class="bi bi-search me-1"></i>搜索银行卡
                    </button>
                </div>
            </div>
        </div>

        <!-- 银行卡表格 -->
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>卡号</th>
                        <th>币种</th>
                        <th>存款类型</th>
                        <th>开户日期</th>
                        <th>开户金额</th>
                        <th>余额</th>
                        <th>是否挂失</th>
                        <th>客户编号</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for card in cards.items %}
                    <tr>
                        <td>{{ card.cardID }}</td>
                        <td>{{ card.curID }}</td>
                        <td>{{ card.saving_name }}</td>  <!-- 修改为存款类型名称 -->
                        <td>{{ card.openDate.strftime('%Y-%m-%d') }}</td>
                        <td>{{ card.openMoney }}</td>
                        <td>{{ card.balance }}</td>
                        <td>{{ card.IsReportLoss }}</td>
                        <td>{{ card.customerID }}</td>
                        <td>
                            <button class="btn btn-sm btn-info detail-btn" data-id="{{ card.cardID }}">
                                <i class="bi bi-info-circle"></i> 详细
                            </button>
                            <button class="btn btn-sm btn-warning edit-btn" data-id="{{ card.cardID }}">
                                <i class="bi bi-pencil"></i> 编辑
                            </button>
                            <button class="btn btn-sm btn-danger delete-btn" data-id="{{ card.cardID }}">
                                <i class="bi bi-trash"></i> 删除
                            </button>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="9" class="text-center">没有找到银行卡记录</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- 分页控件 -->
        <nav class="mt-4">
            <ul class="pagination justify-content-center">
                {% if cards.has_prev %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('admincard.admincardmain', page=cards.prev_num, cardIdSearch=cardIdSearch, customerIdSearch=customerIdSearch) }}">上一页</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#">上一页</a>
                </li>
                {% endif %}

                {% for page_num in range(1, cards.pages + 1) %}
                    <li class="page-item {% if page_num == cards.page %}active{% endif %}">
                        <a class="page-link" href="{{ url_for('admincard.admincardmain', page=page_num, cardIdSearch=cardIdSearch, customerIdSearch=customerIdSearch) }}">{{ page_num }}</a>
                    </li>
                {% endfor %}

                {% if cards.has_next %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('admincard.admincardmain', page=cards.next_num, cardIdSearch=cardIdSearch, customerIdSearch=customerIdSearch) }}">下一页</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#">下一页</a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>

<!-- 银行卡模态框 (添加/编辑) -->
<div class="modal fade" id="cardModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">添加新银行卡</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="cardForm">
                    <input type="hidden" id="cardId">
                    <div class="mb-3">
                        <label class="form-label">币种</label>
                        <select class="form-select" id="curID" required disabled>
                            <option value="RMB" selected>人民币 (RMB)</option>
                        </select>
                        <small class="form-text text-muted">币种默认为人民币</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">存款类型</label>
                        <select class="form-select" id="savingID" required>
                            <option value="">请选择存款类型</option>
                            <!-- 存款类型将通过JS动态填充 -->
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">开户金额</label>
                        <input type="number" class="form-control" id="openMoney" min="0" step="0.01" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">余额</label>
                        <input type="number" class="form-control" id="balance" min="0" step="0.01" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">是否挂失</label>
                        <select class="form-select" id="IsReportLoss" required>
                            <option value="否">否</option>
                            <option value="是">是</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">客户编号</label>
                        <input type="number" class="form-control" id="customerID" min="1" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveCardBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 银行卡详情模态框 -->
<div class="modal fade" id="cardDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">银行卡详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-4">
                    <div class="col-md-6">
                        <h5>基本信息</h5>
                        <ul class="list-group">
                            <li class="list-group-item"><strong>卡号：</strong> <span id="detailCardId"></span></li>
                            <li class="list-group-item"><strong>币种：</strong> <span id="detailCurID"></span></li>
                            <li class="list-group-item"><strong>存款类型：</strong> <span id="detailSavingID"></span></li>
                            <li class="list-group-item"><strong>开户日期：</strong> <span id="detailOpenDate"></span></li>
                            <li class="list-group-item"><strong>开户金额：</strong> <span id="detailOpenMoney"></span></li>
                            <li class="list-group-item"><strong>余额：</strong> <span id="detailBalance"></span></li>
                            <li class="list-group-item"><strong>状态：</strong> <span id="detailStatus"></span></li>
                            <li class="list-group-item"><strong>客户编号：</strong> <span id="detailCustomerID"></span></li>
                            <li class="list-group-item"><strong>客户姓名：</strong> <span id="detailCustomerName"></span></li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h5>操作</h5>
                        <div class="d-grid gap-2">
                            <button class="btn btn-warning" id="reportLossBtn">
                                <i class="bi bi-exclamation-triangle"></i> 挂失银行卡
                            </button>
                            <button class="btn btn-info" id="resetPasswordBtn">
                                <i class="bi bi-key"></i> 重置密码
                            </button>
                            <button class="btn btn-primary" id="viewAllTransactionsBtn">
                                <i class="bi bi-list-check"></i> 查看所有交易
                            </button>
                        </div>
                    </div>
                </div>

                <div class="mb-4">
                    <h5>最近交易记录</h5>
                    <div class="table-responsive">
                        <table class="table table-bordered" id="recentTransactionsTable">
                            <thead>
                                <tr>
                                    <th>交易日期</th>
                                    <th>交易类型</th>
                                    <th>交易金额</th>
                                    <th>备注</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 交易记录将通过JS动态填充 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 重置密码模态框 -->
<div class="modal fade" id="resetPasswordModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">重置密码</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="resetPasswordForm">
                    <input type="hidden" id="resetCardId">
                    <div class="mb-3">
                        <label class="form-label">新密码</label>
                        <input type="password" class="form-control" id="newPassword" required minlength="6" maxlength="20">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">确认密码</label>
                        <input type="password" class="form-control" id="confirmPassword" required minlength="6" maxlength="20">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmResetBtn">确认重置</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/admin_main.js') }}"></script>
<script src="{{ url_for('static', filename='js/admin_card.js') }}"></script>
{% endblock %}